<div class="controlBox">
  <div class="farris-panel">

    <!-- farris控件 -->
    <div class="farris-panel-item card border-0" *ngFor="let category of controlCategoryList">
      <ng-container *ngIf="!category.hideInControlBox">
        <div class="card-header" (click)="category.isHide=!category.isHide">
          <div class="panel-item-title">
            <div class="f-section-formgroup-legend">
              <div class="f-header px-2  col-form-label">
                <div class="f-toolbar mr-2">
                  <span class="f-icon" [class.f-icon-arrow-60-down]="!category.isHide"
                    [class.f-icon-arrow-e]="category.isHide"></span>
                </div>
                <div class="f-title f-utils-fill d-flex justify-content-between">
                  <span>{{category.name}}</span>
                  <div class="mr-3 icon-panel" *ngIf="category.type==='componentTemplate'">
                    <i class="f-icon f-icon-refresh mr-2" title="刷新组件模板" (click)="onRefreshTemplateCategory($event)"></i>
                    <i class="f-icon f-icon-home-setup" title="维护组件模板" (click)="onManageTemplateCategory($event)"></i>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>

        <div class="card-body px-2 py-0 border-0 controlCategory no-drop" [hidden]="category.isHide">
          <div *ngFor="let control of category.items"
            [class.d-none]="control.dependentParent || control.hideInControlBox" class="controlPanel drag-copy"
            [attr.data-sourceType]="'control'" [attr.data-controlType]="control.type"
            [attr.data-controlTypeName]="control.name" [attr.data-category]="control.category"
            [class.no-drag]="control.disable" [attr.data-fieldType]="control.fieldType"
            [attr.data-udtId]="control.udtId" [attr.data-useStrictMappingRule]="control.useStrictMappingRule"
            [attr.data-feature]="control.feature" [attr.data-templateId]="control.id"
            [attr.data-templateCategory]="control.templateCategory">
            <div>
              <div [class]="'farrisControlIcon '+ control.controlIconClass"></div>
              <div class="controlName">{{control.name}}</div>
            </div>
          </div>
        </div>
      </ng-container>
    </div>

  </div>
</div>